<template>
  <div>
    <a-card :bordered="false">
      <a-tabs v-model="activeKey">
        <a-tab-pane
          key="1"
        >
          <span slot="tab">
          <a-icon type="alert" />
           最优成本代价模型
          </span>
          <page ref="costPage" model="0" v-if="activeKey === '1'" />
        </a-tab-pane>

        <a-tab-pane
          key="2"
        >
          <span slot="tab">
           <a-icon type="api" />
            最优设备代价模型
          </span>
          <page ref="equipmentPage" model="1" v-if="activeKey === '2'" />
        </a-tab-pane>

        <a-tab-pane
          key="3"
        >
          <span slot="tab">
           <a-icon type="code" />
            最优能耗代价模型
          </span>
          <page ref="energyPage" model="2" v-if="activeKey === '3'" />
        </a-tab-pane>

        <a-tab-pane
          key="4"
        >
          <span slot="tab">
           <a-icon type="control" />
            配电子网均衡代价模型
          </span>
          <page ref="powerPage" model="3" v-if="activeKey === '4'" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
  import Page from "./modules/Page";

  export default {
    name: "F030206",
    components: {
      Page,
    },
    data() {
      return {
        activeKey: '1'
      }
    },
    created() {},
    methods: {
      handleTabChange() {
        let key = this.activeKey;
        if (key === '1' && this.$refs.costPage) {
          this.$refs.costPage.loadData();
        } else if (key === '2' && this.$refs.equipmentPage) {
          this.$refs.equipmentPage.loadData();
        } else if (key === '3' && this.$refs.energyPage) {
          this.$refs.energyPage.loadData();
        } else if (key === '4' && this.$refs.powerPage) {
          this.$refs.powerPage.loadData();
        }
      },
    },
  }
</script>
